<template>
	<view class="box" v-if="dataForm.name">
		<view class="top">
			<view class="title-top">{{dataForm.name}}</view>
			<view class="top-tags">
				<view class="tag-info">{{dataForm.categoryName}}</view>
				<view class="tag-unStart">已完成</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					创建时间
				</view>
				<view class="right1">
					{{dataForm.createTime}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					创建人
				</view>
				<view class="right1">
					{{dataForm.createUserName}}
				</view>
			</view>
		</view>
		<view class="line8"></view>
		<view class="my-title">
			培训基本信息
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					培训时间
				</view>
				<view class="right1">
					{{dataForm.trainStartTime}}至{{dataForm.trainEndTime}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					培训人员
				</view>
				<view class="right1" style="flex: 1;" v-if="dataForm.signNames.length>3">
					{{dataForm.signNames.join(',').substr(0,10)}}...等{{dataForm.signNames.length}}人 <span
						style="margin-left: 6rpx;color: rgba(15, 83, 172, 1);"
						@click="handleAll(dataForm.signNames)">查看全部</span>
				</view>
				<view class="right1" v-else>
					{{dataForm.signNames.join(",")}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					培训地址
				</view>
				<view class="right1">
					{{dataForm.address}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					培训老师
				</view>
				<view class="right1">
					{{dataForm.trainTeacher}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					计划学时
				</view>
				<view class="right1">
					{{dataForm.learnDuration}}学时
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					培训方式
				</view>
				<view class="right1">
					{{dataForm.trainWay == 1?'线上':'线下'}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					考核方式
				</view>
				<view class="right1">
					{{renderAssessWay(dataForm.assessWay)}}
				</view>
			</view>
		</view>
		<view class="line8"></view>
		<view class="kiss-list" v-if="dataForm.courseId != ''">
			<view class="my-title">
				关联课程
			</view>
			<view class="kcInfo">
				<image class="kcInfo-img" :src="unionData.courseImage" mode=""></image>
				<view class="kcInfo-con">
					<view class="name">
						{{unionData.courseName}}
					</view>
					<view class="name2">
						学习进度: {{unionData.hadCourseNum}}/{{unionData.courseUserNum}}
					</view>
					<view class="name2">
						学习开始时间: {{unionData.courseBeginTime}}
					</view>
				</view>
			</view>
			<view class="kcBtn">
				<view class="selectJd" @click="selectJinDu(0)">
					查看进度
				</view>
			</view>
		</view>
		<view class="line8"></view>
		<view class="kiss-list" v-if="dataForm.examPaperId != ''">
			<view class="my-title">
				关联试卷
			</view>
			<view class="kcInfo">
				<image class="kcInfo-img" :src="unionData.examPaperImage" mode=""></image>
				<view class="kcInfo-con">
					<view class="name">
						{{unionData.examPaperName}}
					</view>
					<view class="name2">
						考试进度: {{unionData.hadExamNum}}/{{unionData.examUserNum}}
					</view>
					<view class="name2">
						考试开始时间: {{unionData.examBeginTime}}
					</view>
				</view>
			</view>
			<view class="kcBtn">
				<view class="selectJd" @click="selectJinDu(1)">
					查看进度
				</view>
			</view>
		</view>
		<view class="line8"></view>
		<view class="my-title">
			培训记录
		</view>
		<view class="px-list" v-if="dataForm.trainWay == 2">
			<view class="px-list-title">
					培训内容
			</view>
			<view class="px-list-content">{{dataForm.trainRecord.content || '无'}}</view>
		</view>
		<view class="px-list">
			<view class="px-list-title">
					培训小结
			</view>
			<view class="px-list-content">{{dataForm.trainRecord.briefSummary || '无'}}</view>
		</view>
		<view class="px-list">
			<view class="px-list-title">
					备注
			</view>
			<view class="px-list-content">{{dataForm.trainRecord.remark || '无'}}</view>
		</view>
		<view class="kiss-title">
			<view class="left">
				培训照片
			</view>
		</view>
		<view class="kiss-upload">
			<view class="textInput" v-if="fileList1.length == 0">暂无记录照片</view>
			<uploadImg v-else :maxCount="fileList1.length" :fileType="16" :fileList="fileList1" :sourceType="sourceType"
				:deletable="false"></uploadImg>

		</view>
		<view class="kiss-list" v-if="dataForm.signFlag">
			<view class="kiss-list-title">
				<view class="left">
					签到人数
				</view>
				<view class="right1" @click="selectJinDu(2)">
					{{dataForm.signedNum}}/{{dataForm.planNum}}
					<span
						style="margin-right: 10rpx;margin-left: 10rpx;">{{dataForm.planNum-dataForm.signedNum}}人未签到</span>
					<span style="color: rgba(15, 83, 172, 1);">查看全部签名</span>
				</view>
			</view>
		</view>
		<!-- 底部按钮 <view class="bottom-subside"></view>-->
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					记录人
				</view>
				<view class="right1">
					<span style="margin-right: 10rpx;">{{dataForm.recorderName}}</span>
					<span style="color: rgba(15, 83, 172, 1);"
						@click="handleSeeSign(dataForm.trainRecord.recorderSign)">查看签名</span>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import uploadImg from '../components/uploadimg/uploadimg.vue';
	export default {
		components: {
			uploadImg
		},
		data() {
			return {
				fileList1: [],
				sourceType: ['album', 'camera'],
				saveParams: {
					pictures: ''
				},
				// 培训id
				id: '',
				dataForm: {},
				unionData: {}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.initData()
			this.getUnionData()
		},
		methods: {
			getUnionData() {
				uni.$u.http.get(`/train/mobile/train/getUnionData/${this.id}`).then(res => {
					if (res.code == 0) {
						this.unionData = res.data
					}
				})
			},
			initData() {
				uni.$u.http.get(`/train/mobile/train/trainDetail/${this.id}`).then(res => {
					if (res.code == 0) {
						this.dataForm = res.data
						//异常照片
						this.fileList1 = [];
						this.saveParams.pictures = res.data.trainRecord.trainImgs;
						if (res.data.trainRecord.trainImgs) {
							var pictures = res.data.trainRecord.trainImgs.split(',')
							pictures.forEach(s => {
								let dd = {
									url: s
								}
								this.fileList1.push(dd);
							})
						}
					}
				}).catch(err => {})
			},
			// 查看全部
			handleAll(list) {
				uni.navigateTo({
					url: `/pages/subPackagesC/mineTrain/trainPerson?personList=${list}`
				})
			},
			renderAssessWay(str) {
				let typeArr = ['笔试', '实操']
				let arr = []
				str.split(',').map(item => {
					arr.push(typeArr[item - 1])
				})
				return arr.join(',')
			},
			// 查看全部签名
			handleToName() {
				uni.navigateTo({
					url: `/pages/subPackagesC/mineTrain/trainSign?id=${this.id}`
				})
			},
			sumbit() {
				console.log(1111111);
			},
			// 查看记录人签名
			handleSeeSign(sign) {
				uni.$u.http.get(
					`/base/upload/bindFileUrl?fileUrl=${sign}`
				).then(res => {
					if (res.code == 0) {
						uni.navigateTo({
							url: `/pages/subPackagesD/mycenter/sginselect?url=
      					${encodeURIComponent(JSON.stringify(res.data))}&noShow=true`
						})
					}
				}).catch(err => {})
			},

			//查看进度
			selectJinDu(type) {
				uni.navigateTo({
					url: `/pages/subPackagesC/mineTrain/trainSchedule?type=${type}&trainId=${this.dataForm.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.top {
			background-color: #ffffff;
			padding: 32rpx;
			border-bottom: 2rpx solid #F5F5F5;

			.title-top {
				font-size: 34rpx;
			}

			.top-tags {
				display: flex;
				font-size: 24rpx;
				margin-top: 16rpx;

				.tag-info {
					border-radius: 4px;
					padding: 4px 12px;
					line-height: 17.38px;
					background-color: rgba(140, 140, 140, 0.2);
					color: #8C8C8C;
					margin-right: 24rpx;
				}

				.tag-unStart {
					border-radius: 4px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 4px 12px;
					color: rgba(2, 173, 130, 1);
					background: rgba(40, 184, 105, 0.2);
				}
			}
		}

		.my-title {
			padding: 32rpx 32rpx 0 32rpx;
			font-weight: 600;
		}
	}

	.kcInfo {
		padding: 32rpx;
		display: flex;

		.kcInfo-img {
			width: 160rpx;
			height: 160rpx;
			margin-right: 32rpx;
		}

		.kcInfo-con {
			font-weight: 400;
			align-items: flex-end;

			.name {
				font-size: 32rpx;
				color: #2B2B2B;
				margin-bottom: 16rpx;
				width: 400rpx;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				white-space: nowrap; // 默认不换行；
			}

			.name2 {
				font-size: 15px;
				font-weight: 400;
				color: #4D4D4D;
				width: 400rpx;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				white-space: nowrap; // 默认不换行；
			}
		}
	}

	.kcBtn {
		display: flex;
		text-align: center;

		.selectJd {
			width: 100%;
			border: 2rpx solid #EDEDED;
			padding: 24rpx 0;
			color: rgba(15, 83, 172, 1);
		}
	}

	.px-list {
		padding: 32rpx;
		font-size: 16px;
		font-weight: 400;
		border-bottom: 1px solid #F5F5F5;

		.px-list-title {
			color: #666666;
			
		}

		.px-list-content {
			margin-top: 16rpx;
			color: #2B2B2B;
			word-break: break-all;
			word-wrap: break-word;
		}
	}
</style>